import * as React from "react";
import { Row, Col } from "antd";
import { DtPowerDevice } from "../Condition";
import { getDeviceLastData } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
export interface DTTableProps {
  device: DtPowerDevice;
  lastData: any;
}

export interface DTTableState {}

class DTTable extends React.Component<DTTableProps, DTTableState> {
  private dataBase: any = null;
  shouldComponentUpdate(np: DTTableProps, ns: DTTableState) {
    if (np.device !== this.props.device) {
      console.log(np.device);
      let pream = {
        deviceId: np.device.deviceId,
      };
      this.getDeviceLastData(pream);
    }
    return true;
  }
  async getDeviceLastData(pream: any) {
    try {
      let res: any = await getDeviceLastData(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.dataBase = json.data;
        console.log(json.data);
      }
    } catch (error) {}
  }
  render() {
    return (
      <Row>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">温度(℃)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相温度:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.temperaturea : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相温度:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.temperatureb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相温度:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.temperaturec : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">箱体温度:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.temperatured : 0}
              </div>
            </div>
          </div>
        </Col>

        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">电压(V)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.voltagea : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.voltageb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.voltagec : 0}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">电流(A)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.currenta : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.currentb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.currentc : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">零线电流:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.currentd : 0}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">电压合格率</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相合格率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.ratea : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相合格率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.rateb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相合格率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.ratec : 0}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">有功功率(kW)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">总有功功率：</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.activet : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相有功功率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.activea : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相有功功率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.activeb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相有功功率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.activec : 0}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">无功功率(kW)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">总无功功率：</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.reactivet : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相无功功率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.reactivea : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相无功功率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.reactiveb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相无功功率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.reactivec : 0}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">功率因数()</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">总功率因数：</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.factort : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">A相功率因数:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.factora : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">B相功率因数:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.factorb : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">C相功率因数:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.factorc : 0}
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={12}
          sm={6}
          md={6}
          lg={6}
          xl={6}
          xxl={3}
          style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
        >
          <div className="dt_table">
            <div className="th txtCtenter">剩余电流(MA)</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">剩余电流:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.residual : 0}
              </div>
            </div>
          </div>
          <div className="dt_table">
            <div className="th txtCtenter">电压/电流不平衡率</div>
            <div className="tr row-md ">
              <div className="col-md-24 key">电压不平衡率:</div>
              <div className="col-md-24 val" style={{ color: "#f00" }}>
                {this.dataBase ? this.dataBase.unbalancev : 0}
              </div>
            </div>
            <div className="tr row-md ">
              <div className="col-md-24 key">电流不平衡率:</div>
              <div className="col-md-24 val">
                {this.dataBase ? this.dataBase.unbalancee : 0}
              </div>
            </div>
          </div>
        </Col>
      </Row>
    );
  }
}

export default DTTable;
